<template>
  <div class="select-layout-mode">
    <el-tooltip placement="top" content="左侧模式">
      <el-container
        :class="['layout-mode', 'left', layoutType === 'vertical' ? 'active' : '']"
        @click="setLayoutMode('vertical')">
        <el-aside></el-aside>
        <el-container>
          <el-header></el-header>
          <el-main></el-main>
        </el-container>
      </el-container>
    </el-tooltip>
    <el-tooltip placement="top" content="顶部模式">
      <el-container
        :class="['layout-mode', 'top', layoutType === 'horizontal' ? 'active' : '']"
        @click="setLayoutMode('horizontal')">
        <el-header></el-header>
        <el-main></el-main>
      </el-container>
    </el-tooltip>
    <el-tooltip placement="top" content="混合模式">
      <el-container
        :class="['layout-mode', 'left-top', layoutType === 'mix' ? 'active' : '']"
        @click="setLayoutMode('mix')">
        <el-header></el-header>
        <el-container>
          <el-aside></el-aside>
          <el-main></el-main>
        </el-container>
      </el-container>
    </el-tooltip>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { getStore, setStore } from "@/utils/localStorage";

const layoutStorage = computed(() => getStore({ name: "layout" }));
const layoutType = ref("");
layoutType.value = layoutStorage.value.layout;

/** 设置导航模式 */
function setLayoutMode(layout: string) {
  layoutType.value = layout;
  window.document.body.setAttribute("layout", layout);
  const storage = getStore({ name: "layout" });
  storage.layout = layout;
  setStore({ name: "layout", content: storage });
}
</script>

<style lang="scss" scoped>
.select-layout-mode {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.layout-mode {
  width: 46px;
  height: 42px;
  flex-grow: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid #00000000;
  &:hover {
    border: 2px solid var(--el-color-primary);
  }
}

.active {
  border: 2px solid var(--el-color-primary);
}

.el-header {
  height: 12px;
}

.el-aside {
  width: 16px;
}

.left {
  .el-header {
    background-color: var(--el-border-color);
  }
  .el-aside {
    background-color: var(--el-color-primary);
  }
  .el-main {
    background-color: var(--el-fill-color);
  }
}

.top {
  .el-header {
    background-color: var(--el-color-primary);
  }
  .el-main {
    background-color: var(--el-fill-color);
  }
}

.left-top {
  .el-header {
    background-color: var(--el-border-color);
  }
  .el-aside {
    background-color: var(--el-color-primary);
  }
  .el-main {
    background-color: var(--el-fill-color);
  }
}
</style>
